<template>
	<view class="page-main">
		<u--form ref="uForm" :model="feedbackForm" :rules="rules" labelPosition="top" labelWidth="auto">
			<u-form-item label="问题和意见" prop="content" borderBottom required>
				<view class="content">
					<textarea v-model="feedbackForm.content" placeholder="请输入内容" maxlength="256" border="none"
						style="width: 100%;" />
				</view>
				<view class="content-images">
					<u-upload :fileList="fileList" width="200rpx" height="200rpx" accept="image" uploadText="图片"
						maxCount="6" multiple @afterRead="fileSelect" @delete="fileDelete" />
				</view>
			</u-form-item>
			<u-form-item label="邮箱(选填)" prop="mailbox" borderBottom>
				<u--input v-model="feedbackForm.mailbox" placeholder="请输入邮箱" border="none" />
			</u-form-item>
		</u--form>

		<view style="margin-top: 80rpx;">
			<u-button type="success" text="提交" @click="onSubmit()" />
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEdit: false,
				feedbackForm: {
					mailbox: null,
					content: null,
					images: null
				},
				fileList: [],
				deletedImage: [],
				rules: {
					content: {
						type: 'string',
						required: true,
						message: '请输入内容',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		onLoad(option) {

		},
		methods: {
			fileSelect(e) {
				let imageMax = 100 * 1024,
					isExceedMax = false
				for (let i = 0; i < e.file.length; i++) {
					let item = e.file[i]
					if (item.size <= imageMax) {
						delete item.thumb
						this.fileList.push(item)
						continue
					}
					isExceedMax = true
				}
				if (isExceedMax) {
					uni.$u.toast(`文件过大，请压缩后上传`);
				}

			},
			onSubmit() {
				this.$refs.uForm.validate().then(async (res) => {
					uni.showLoading({
						title: '操作中',
						mask: true
					});
					if (this.fileList.length > 0) {
						let isSuccess = true
						await this.uploadFile(this.fileList).catch((err) => {
							isSuccess = false
							uni.hideLoading();
							uni.$u.toast('上传失败：' + err.message)
						})
						if (!isSuccess) {
							return
						}
					}
					this.uploadSuccess(this.fileList);
				}).catch(err => {
					uni.$u.toast('校验失败')
				})
			},
			uploadSuccess(files) {
				let feedbackForm = this.feedbackForm
				if (files.length > 0) {
					feedbackForm.images = files
				}
				if (!feedbackForm.mailbox) {
					delete feedbackForm.mailbox
				}
				//添加
				feedbackForm.userId = this.$tools.getUser()._id
				const db = uniCloud.database()
				db.collection('feedback')
					.add(feedbackForm)
					.then((res) => {
						feedbackForm._id = res.result.id
						uni.hideLoading();

						uni.navigateBack({
							success: () => {
								uni.$u.toast('反馈成功');
							}
						})
					}).catch((err) => {
						uni.hideLoading();
						uni.$u.toast(err.message);
					})
			},
			fileDelete(e) { //文件删除时
				this.fileList.splice(e.index, 1)
			},
			async uploadFile(fileArr) {
				let newDate,
					imgType,
					fileType,
					file
				for (let i = 0; i < fileArr.length; i++) {
					file = fileArr[i]
					newDate = new Date().getTime()
					fileType = file.type
					imgType = file.url.split(".")
					imgType = imgType[imgType.length - 1]
					const res = await uniCloud.uploadFile({
						filePath: file.url,
						cloudPath: 'feedback_' + fileType + '_' + newDate + '_' + i + '.' + imgType,
						fileType: fileType
					})
					file.url = res.fileID
				}

				return true
			},
		}
	}
</script>

<style>
	page {
		--bg-image: none;
	}

	.content {
		font-size: 15px;
		color: #606266;
		padding: 9px;
	}

	.u-upload__deletable.data-v-69e2a36e {
		width: 20px !important;
		height: 20px !important;
	}

	.u-upload__deletable.data-v-69e2a36e text {
		font-size: 15px !important;
		line-height: 15px !important;
	}
</style>
